
import React, { useEffect, useState } from 'react'
import { Cell, Image, List, Popup, Typography } from 'react-vant';
import { connect } from 'react-redux'
import logo from '../../image/logo.png'
import { Revoke, ServiceO } from '@react-vant/icons';
import Popupitem from './Popupitem'
let Single = (props) => {
    const { datalist } = props;
    const { totalList } = props;
    const { getData } = props;

    useEffect(() => {
        getData()
    }, []);

    console.log(datalist);
    const [visible, setVisible] = useState(false)
    //订单详情
    const [datadishes, setDatadishes] = useState([])
    const [id, setId] = useState(0)

    return (
        <div style={{ overflowY: 'auto', height: '65vh' }} className='evaluate'>
            {/* 订单页 */}
            <List finished={true}>

                <>
                    {datalist.map((item, idx) => (
                        <Cell
                            center
                            key={idx}
                            isLink
                            style={{ padding: '0 5px' }}
                            title={
                                <div style={{ display: 'flex' }}>
                                    <Image width={50} height={50} src={logo} radius={'20px'} style={{ marginRight: '10px' }} />
                                    <h3 style={{ lineHeight: '50px' }}>趣学面馆</h3>
                                    <div style={{ color: '#cc3', marginLeft: '140px', lineHeight: '50px' }}>已完成</div>
                                </div>
                            }
                            label={
                                <div style={{ display: 'flex' }} onClick={() => {
                                    setDatadishes(datalist[idx]);
                                    setId(idx);
                                    setVisible(true)
                                }}>
                                    <div className='orderGoods'
                                    >
                                        {item.map((iten, index) => (
                                            <div key={index}><Image width={60} height={60} src={iten.dishes_img} style={{ marginRight: '20px', marginLeft: '10px' }} radius={'10px'} />
                                                <h4 style={{ paddingLeft: '10px' }}><Typography.Text style={{ width: '20vw' }} ellipsis={{ rows: 2 }}>{iten.dishes_name}</Typography.Text></h4>
                                            </div>
                                        ))}
                                    </div>

                                    {

                                        <div style={{ flex: 1, textAlign: 'right', fontSize: '15px', paddingTop: '15px' }}>
                                            <h4>￥:{totalList[idx].count_price}</h4>
                                            <h5>共{item.length}件</h5>
                                        </div>
                                    }
                                </div>}
                        />
                    ))}
                </>

            </List>
            {/* 订单详情 */}
            <Popup
                visible={visible}
                style={{ width: '100%', height: '100%', backgroundColor: 'rgb(245, 245, 245)' }}
                position='right'
                onClose={() => setVisible(false)}
                closeable

                title={<div style={{ display: 'flex ', justifyContent: ' space-between', padding: '5px 35px' }}><h3>订单已完成</h3> <ServiceO /></div>}
                closeIconPosition="top-left"
                closeIcon={<Revoke />}
            >
                <Popupitem setVisible={setVisible} totalList={totalList} id={id} datadishes={datadishes}></Popupitem>
            </Popup>

        </div>

    )
}

const mapStateToProps = function (state) {
    console.log(state);
    return {
        user: state.userInfo
    }
}
Single = connect(mapStateToProps)(Single)
export default Single;
